import React, { useEffect, useState, useRef } from 'react';

const HocCom = (WrapCompoment) => {

    return class Mozi extends WrapCompoment {
        render() {
            return super.render();
        }
    };
};

class Child extends React.Component {

    render() {
        return (
            <>
                <div>
                    我是Child
                </div>
            </>
        );
    }
}

const Wrap = HocCom(Child);

export default () => {
    const HOC = useRef();

    const testPromise = (time) => {
        return new Promise((resolve, rejected) => {
            setTimeout(() => {
                console.log(time);
                resolve(time);
            }, time);
        });
    };
    const wrap = (promise) => {
        let stack = [];
        return (time) => {
            let length = stack.length + 1;
            promise(time).then(res => {
                // console.log(stack.length, length, '---', time);
                if (stack.length === length) {
                    stack = [];
                    console.log('执行了最后一次', res);
                } else {
                    console.log('第一次', time);
                    // 如果不是最后一次就什么都不做，不处理之前的请求
                }
            });
            stack.push(1);
        };
    };

    useEffect(() => {
        HOC.current = wrap(testPromise);
    });

    const fetchFn = () => {
        HOC.current(4); // 第一次2秒后返回
        HOC.current(3); // 第二次1秒后返回
        HOC.current(1); // 最后一次1秒后返回
    };
    return (
        <>
            <button onClick={fetchFn}>test</button>
        </>
    );
};